<template>
    <div class="side-box">
        <div class="meau">
            <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
                @close="handleClose" background-color="#0b5674" text-color="#ffffff" router>
                <el-menu-item index="/Main/HomePage">
                    <template #title>
                        <div>仪表盘</div>
                    </template>
                </el-menu-item>
                <el-menu-item index="/Main/Feedback">
                    <template #title>
                        <div>意见反馈</div>
                    </template>
                </el-menu-item>
                <el-menu-item index="/Main/Product">
                    <template #title>
                        <div>产品列表</div>
                    </template>
                </el-menu-item>
                <el-menu-item index="/Main/Account">
                    <template #title>
                        <div>用户信息</div>
                    </template>
                </el-menu-item>

            </el-menu>

        </div>




    </div>

</template>


<script>
export default {
    name: 'myHeader',
    data() {
        return {
            meauShow: false,
        }
    },

    methods: {
        meauSwitch() {

            this.meauShow = !this.meauShow;

            this.$emit('data-meau', this.meauShow);
        },

        navigatorTo(e) {
            this.$router.push(e.target.dataset.url)
        },

        handleOpen(){
            
        }
    }
}

</script>


<style lang="less" scoped>
.meau {
    width: 120px;
    text-align: center;
    padding: 0 auto;
    background-color: #074963;
    color: white;
    font-size: 16px;
    height: calc(100vh - 80px);
    font-family: Outfit, sans-serif;

    .meau-item {
        line-height: 50px;
        background-color: #0b5674;
    }




}
</style>